@use '../core' as *;

$z-index-base: 10000; // For automated example mouse
$z-index-debug-canvas: $z-index-base + 10;
$z-index-debug-panel: $z-index-debug-canvas + 200;

$z-index-gatsby-overlay: 10100;

html,
body {
    margin: 0;
    padding: 0;
    position: relative;
}

// Increase z-index, so gatsby errors show on top of the splash
gatsby-fast-refresh {
    --z-index-overlay: #{$z-index-gatsby-overlay};
}

.homepageHero {
    padding-top: $spacing-size-10;
    background-color: var(--color-bg-site-header);

    @media screen and (min-width: $breakpoint-hero-small) {
        padding-top: $spacing-size-16;
    }

    @media screen and (min-width: $breakpoint-hero-large) {
        padding-top: $spacing-size-24;
    }
}

.heroHeadings {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;

    @media screen and (min-width: $breakpoint-hero-large) {
        text-align: unset;
    }

    h1,
    h2 {
        line-height: var(--text-lh-tight);
        color: var(--color-white);
    }

    h1 {
        font-size: 28px;

        @media screen and (min-width: $breakpoint-hero-small) {
            font-size: var(--text-fs-2xl);
        }

        @media screen and (min-width: $breakpoint-hero-large) {
            font-size: min(3.4vw, 54px);

            margin-top: -0.225em;
            margin-bottom: 0.5em;
        }
    }

    h2 {
        max-width: 18em;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 1.4em;

        @media screen and (min-width: $breakpoint-hero-small) {
            font-size: 22px;
        }

        @media screen and (min-width: $breakpoint-hero-large) {
            font-size: min(1.9vw, 30px);
            max-width: unset;
        }
    }
}

.heroInner {
    display: flex;
    flex-direction: column;
    gap: 0 $spacing-size-16;

    @media screen and (min-width: $breakpoint-hero-large) {
        flex-direction: row;
    }
}

.heroGrid {
    display: flex;
    flex-direction: row-reverse;
    height: 320px;
    background-color: #001223; // --ag-background-color;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;

    #{$selector-darkmode} & {
        background-color: #121f29;
    }

    @media screen and (min-width: $breakpoint-hero-large) {
        width: 860px;
        height: 416px;
    }

    .loadingLogoContainer {
        width: 100%;
        height: 100%;
        position: relative;

        svg[class*='logo-mark'] {
            position: absolute;
            display: block;
            width: 64px * 2;
            height: 48px * 2;
            top: 50%;
            left: 50%;
            transform: translate(-60px, -48px);
        }
    }
}

.homepageFrameworks {
    background-color: var(--color-util-brand-100);
    padding-top: $spacing-size-4;
    padding-bottom: $spacing-size-12;

    @media screen and (min-width: 640px) {
        padding-top: $spacing-size-12;
    }

    #{$selector-darkmode} & {
        background-color: var(--color-util-gray-100);
        border-bottom: 1px solid var(--color-border-primary);
    }
}

.frameworksInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: $spacing-size-2;

    @media screen and (min-width: 640px) {
        flex-direction: row;
    }

    @media screen and (min-width: 1020px) {
        gap: $spacing-size-4;
    }
}

.frameworksLabel {
    @media screen and (min-width: 1020px) {
        --font-size: var(--text--fs-xl);
    }

    #{$selector-darkmode} & {
        color: var(--color-text-primary);
    }
}

.homepageQuotes {
    padding-top: $spacing-size-16;
    padding-bottom: $spacing-size-2;
    background-color: var(--color-util-gray-50);

    @media screen and (min-width: 940px) {
        padding-top: $spacing-size-24;
        padding-bottom: $spacing-size-4;
    }
}

.homepageCustomers {
    background-color: var(--color-util-gray-50);
    padding-bottom: $spacing-size-2;
    padding-top: $spacing-size-12;

    #{$selector-darkmode} & {
        border-bottom: 1px solid var(--color-border-primary);
    }
}

.customersInner {
    text-align: center;

    p {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

.customerLogos {
    --overflow-width: 10vw;

    position: relative;
    width: calc(100% + var(--overflow-width) * 2);
    height: 107px;
    margin-left: calc(var(--overflow-width) * -1);
    background-image: url('../../images/customer-logos/ag-grid-customer-logos.webp');
    background-size: auto 107px;
    animation-name: customerMarquee;
    animation-duration: 1600s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    @media screen and (min-width: $breakpoint-grid-homepage-medium) {
        animation-duration: 400s;
    }

    &::before,
    &::after {
        content: '';
        position: absolute;
        height: 100%;
        width: var(--overflow-width);
    }

    &::before {
        left: 0;
        background-image: linear-gradient(90deg, var(--color-util-gray-50), transparent);
    }

    &::after {
        right: 0;
        background-image: linear-gradient(90deg, transparent, var(--color-util-gray-50));
    }

    @media screen and (max-width: $breakpoint-hero-small) {
        margin: 0 auto;
        width: 100%;
        animation-duration: 1100s;
    }
}

@keyframes customerMarquee {
    from {
        background-position-x: 0%;
    }

    to {
        background-position-x: 5000%;
    }
}

.homepageCharts {
    padding-top: $spacing-size-24;
    padding-bottom: $spacing-size-24;

    #{$selector-darkmode} & {
        border-bottom: 1px solid var(--color-border-primary);
    }
}

.chartsInner {
    display: flex;
    flex-direction: column;

    @media screen and (min-width: $breakpoint-grid-homepage-medium) {
        flex-direction: row;
    }
}

.chartsCopy {
    width: 100%;
    margin-bottom: $spacing-size-8;
    text-align: center;

    @media screen and (min-width: $breakpoint-grid-homepage-medium) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 40%;
        margin-bottom: 0;
        padding-right: $spacing-size-8;
        text-align: left;
    }
}

.chartsLogo {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin-bottom: $spacing-size-4;
    margin-left: $spacing-size-4;

    @media screen and (min-width: $breakpoint-grid-homepage-medium) {
        $logo-scale: 1.3;

        margin-bottom: $spacing-size-2;
        margin-left: -$spacing-size-4;

        :global(.logotype) {
            width: 154px * $logo-scale;
            height: 40px * $logo-scale;
        }

        :global(.logomark) {
            width: 64px * $logo-scale;
            height: 48px * $logo-scale;
        }
    }
}

[data-dark-mode='true'] .chartsLogo :global(#LogoType) > * {
    fill: var(--color-white) !important; // !important used to override SVG inline styles
}

.chartsExample {
    width: 100%;

    @media screen and (min-width: $breakpoint-grid-homepage-medium) {
        width: 60%;
    }

    img {
        width: 100%;
    }

    .chartsExampleDark {
        display: none;
    }

    #{$selector-darkmode} & {
        .chartsExampleLight {
            display: none;
        }

        .chartsExampleDark {
            display: inline;
        }
    }
}

.automatedRowGroupingOuter,
.automatedIntegratedChartsOuter {
    #{$selector-darkmode} & {
        border-bottom: 1px solid var(--color-border-primary);
    }
}

.homepageExample {
    padding-top: $spacing-size-12;
    padding-bottom: $spacing-size-16;

    @media screen and (min-width: $breakpoint-automated-row-grouping-medium) {
        padding-top: $spacing-size-24;
        padding-bottom: $spacing-size-32;
    }
}

.automatedIntegratedChartsOuter {
    margin-bottom: $spacing-size-24;
    background-color: var(--color-util-brand-100);

    #{$selector-darkmode} & {
        background-color: var(--color-gray-800);
    }
}

.sponsorshipInner {
    margin-bottom: $spacing-size-20;

    @media screen and (min-width: $breakpoint-sponsorship-large) {
        display: flex;
        justify-content: center;
        gap: $spacing-size-8;
    }

    > div {
        text-align: center;
        margin-bottom: $spacing-size-10;
        list-style: var(--text-lh-tight);

        @media screen and (min-width: $breakpoint-sponsorship-large) {
            text-align: unset;
        }
    }

    > div h3 {
        max-width: 12em;
        margin-left: auto;
        margin-right: auto;

        @media screen and (min-width: $breakpoint-sponsorship-large) {
            margin-left: unset;
            margin-right: unset;
        }
    }
}

.projectsList {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.project {
    --icon-size: #{$spacing-size-16};

    display: grid;
    grid-template-columns: var(--icon-size) auto;
    grid-template-rows: $spacing-size-8 auto;
    grid-template-areas:
        'icon name'
        'icon link';
    width: min(100%, 25em);
    gap: 0 $spacing-size-4;

    &:not(:last-child) {
        margin-bottom: $spacing-size-8 !important;
    }

    img {
        grid-area: icon;
        width: var(--icon-size);
        height: var(--icon-size);
    }

    h3 {
        grid-area: name;
        margin-bottom: 0;
    }

    a {
        grid-area: link;
    }
}

// Invert plunker logo for darkmode
#{$selector-darkmode} .projectPlunker img {
    filter: invert(1);
}

.automatedExampleDebugPanel {
    position: fixed;
    top: 0;
    right: 0;
    width: 220px;
    height: fit-content;
    border-left: 1px solid var(--color-border-primary);
    border-bottom: 1px solid var(--color-border-primary);
    background-color: rgba(255, 255, 255, 0.85);
    padding: $spacing-size-4;
    z-index: $z-index-debug-panel;

    :global(.disabled) {
        h2 {
            color: var(--color-text-tertiary);

            &::after {
                content: ' (disabled)';
            }
        }
    }

    h2 {
        font-size: var(--text-fs-base);
        margin-bottom: $spacing-size-1;
        margin-top: $spacing-size-2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :global(.state) {
        &::before {
            content: 'State: ';
            color: var(--color-text-tertiary);
        }
    }

    :global(.step) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        :global(.index) {
            &::after {
                content: ':';
            }
        }
    }

    :global(.paused-state) {
        &::before {
            content: 'Paused at: ';
            color: var(--color-text-tertiary);
        }
    }

    :global(.controls) {
        display: flex;
        justify-content: space-between;

        button:not([class^='ag-']) {
            padding: $spacing-size-1;
            line-height: var(--text-lh-ultra-tight);
        }
    }

    :global(.draw-checkbox) {
        margin-top: $spacing-size-2;
        cursor: pointer;
    }

    :global(.mouse-position) {
        margin-top: $spacing-size-2;
        cursor: pointer;

        &::before {
            content: 'Mouse: ';
            color: var(--color-text-tertiary);
        }
    }

    :global(.manager-state) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &::before {
            content: 'Manager: ';
            color: var(--color-text-tertiary);
        }
    }
}

.automatedExampleDebugCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: $z-index-debug-canvas;
}

:global(.automated-example-drag) {
    pointer-events: none;

    @media screen and (max-width: $breakpoint-automated-row-grouping-medium) {
        transform-origin: center left;
        transform: translate(-30px, 0) scale(0.5);
    }
}
